<template>
	<view class="container">
		<!-- 顶部标题 -->
		<view class="header">
			<!-- <text class="title">个人中心</text> -->
		</view>
		
		<!-- 骨架屏 -->
		<template v-if="loading">
			<view class="user-card skeleton">
				<view class="user-info">
					<view class="skeleton-block name"></view>
					<view class="skeleton-block number"></view>
					<view class="skeleton-block phone"></view>
				</view>
				<view class="stats">
					<view class="stat-item" v-for="i in 3" :key="i">
						<view class="skeleton-block value"></view>
						<view class="skeleton-block label"></view>
					</view>
				</view>
			</view>
			
			<view class="menu-grid skeleton">
				<view class="menu-item" v-for="i in 4" :key="i">
					<view class="skeleton-circle"></view>
					<view class="skeleton-block text"></view>
				</view>
			</view>
		</template>
		
		<!-- 实际内容 -->
		<template v-else>
			<!-- 用户信息卡片 -->
			<view class="user-card">
				<view class="user-info">
					<image 
						class="avatar" 
						:src="userInfo.user_avatar_img || '/static/images/default-avatar.png'"
						mode="aspectFill"
					></image>
					<view class="info-content">
						<view class="name-wrapper">
							<text class="name">{{ userInfo.name }}</text>
							<view class="auth-badge" :class="{ 'is-verified': userInfo.user_is_authenticated == 1 }">
								<uni-icons :type="userInfo.user_is_authenticated == 1 ? 'checkbox-filled' : 'info'" size="14" :color="userInfo.user_is_authenticated == 1 ? '#52c41a' : '#faad14'" />
								<text>{{ userInfo.user_is_authenticated == 0 ? '未认证' : (userInfo.user_is_authenticated == 1?"已认证":"已拒绝") }}</text>
							</view>
						</view>
						<text class="number">{{ userInfo.user_number }}</text>
					</view>
				</view>
				
				<view class="stats">
					<view class="stat-item">
						<text class="value">{{ totalLoanAmount || 0 }}</text>
						<text class="label">累计借款(元)</text>
					</view>
					<view class="stat-item">
						<text class="value">{{ pendingAmount || 0 }}</text>
						<text class="label">待还金额(元)</text>
					</view>
					<view class="stat-item">
						<text class="value">{{ completedCount || 0 }}</text>
						<text class="label">已完成借款</text>
					</view>
				</view>
			</view>
			
			<!-- 功能菜单 -->
			<view class="menu-grid">
				<view class="menu-item" v-for="(item, index) in menuItems" :key="index" @click="handleNavigate(item.url)">
					<image class="icon" :src="item.icon" mode="aspectFit"></image>
					<text>{{ item.text }}</text>
				</view>
			</view>
		</template>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { STORAGE_KEY } from '@/common/config.js'
import SkeletonItem from '@/components/skeleton/skeleton.vue'
import EmptyState from '@/components/empty/empty.vue'
import request from '@/common/request.js'

// 格式化手机号 133****4444
const formatPhone = (phone) => {
	return phone ? phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : ''
}

// 用户信息
const userInfo = ref({})

// 借款统计数据 只统计已还款的订单
const totalLoanAmount = computed(() => {
	const records = uni.getStorageSync(STORAGE_KEY.LOAN_RECORDS) || '[]'
	const recordsArray = JSON.parse(records)
		// .reduce((sum, record) => sum + Number(record.loan_amount || 0), 0)
	return recordsArray.filter(item => {
		if(item.status == 3 || item.status == 1 || item.status == 4 || item.status == 0 || item.status == 5) {
			return true
		}
	}).reduce((sum, record) => sum + Number(record.amount || 0), 0)
})

const pendingAmount = computed(() => {
	const records = uni.getStorageSync(STORAGE_KEY.LOAN_RECORDS) || '[]'
	const recordsArray = JSON.parse(records)
	return recordsArray
		.filter(record => record.status === 3 || record.status === 5)
		.reduce((sum, record) => sum + Number(record.amount || 0), 0)
})

// 已还款的订单
const completedCount = computed(() => {
	const records = uni.getStorageSync(STORAGE_KEY.LOAN_RECORDS) || '[]'
	const recordsArray = JSON.parse(records)
	return recordsArray.filter(item => item.status === 4).length
})

// 页面跳转
const handleNavigate = (url) => {
	if(url === "/pages/user/bank-card") {
		uni.showToast({
			title: "维护中",
			icon: "none"
		})
		return
	}
	
	uni.navigateTo({ url })
}

// 加载用户数据
const loadUserData = () => {
	const userInfoStr = uni.getStorageSync(STORAGE_KEY.USER_INFO)
	if (userInfoStr) {
		userInfo.value = JSON.parse(userInfoStr)
		if (userInfo.value.user_avatar_img && !userInfo.value.user_avatar_img.startsWith('http')) {
			userInfo.value.user_avatar_img = request.baseURL.slice(0, -1) + userInfo.value.user_avatar_img
		}
		if (!userInfo.value.user_number) {
			userInfo.value.user_number = '未设置'
		}
	}
	
}

// 添加loading状态
const loading = ref(true)

// 菜单项配置
const menuItems = [
	{
		icon: request.baseURL + "media/default/借款记录.png",
		text: '借款记录',
		url: '/pages/loan/records'
	},
	{
		icon: request.baseURL + "media/default/银行卡.png",
		text: '我的银行卡',
		url: '/pages/user/bank-card'
	},
	{
		icon: request.baseURL + "media/default/web__实名认证.png",
		text: '实名认证',
		url: '/pages/user/auth',
		badge: computed(() => !userInfo.value.user_is_authenticated) // 添加未认证标记
	},
	{
		icon: request.baseURL + "media/default/设置.png",
		text: '设置',
		url: '/pages/user/settings'
	}
]

onMounted(() => {
	loadUserData()
	setTimeout(() => {
		loading.value = false
	}, 1000)
})
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #F5F7FA;
	padding-bottom: env(safe-area-inset-bottom);
	animation: fadeIn 0.5s ease-out;
}

.header {
	padding: 20rpx 30rpx;
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
}

.user-card {
	margin: 20rpx;
	padding: 40rpx 30rpx;
	background: linear-gradient(135deg, #4A90E2, #87CEEB, #4A90E2);
	background-size: 200% 100%;
	animation: gradientMove 10s ease infinite;
	border-radius: 20rpx;
	color: #fff;
	position: relative;
	overflow: hidden;
	
	
	
	&::after {
		content: '';
		position: absolute;
		top: -50%;
		right: -50%;
		width: 200%;
		height: 200%;
		background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
		transform: rotate(-15deg);
	}
	
	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		position: relative;
		z-index: 1;
		
		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			border: 4rpx solid rgba(255, 255, 255, 0.3);
			margin-right: 30rpx;
			box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
		}
		
		.info-content {
			flex: 1;
			
			.name-wrapper {
				display: flex;
				align-items: center;
				gap: 12rpx;
				margin-bottom: 10rpx;
				
				.auth-badge {
					display: flex;
					align-items: center;
					gap: 4rpx;
					padding: 2rpx 12rpx;
					border-radius: 20rpx;
					font-size: 22rpx;
					background: rgba(250, 173, 20, 0.2);
					color: #faad14;
					
					&.is-verified {
						background: rgba(82, 196, 26, 0.2);
						color: #52c41a;
					}
				}
			}
			
			.name {
				font-size: 40rpx;
				font-weight: bold;
			}
			
			.number {
				font-size: 28rpx;
				opacity: 0.8;
				background: rgba(255, 255, 255, 0.2);
				padding: 4rpx 16rpx;
				border-radius: 20rpx;
			}
		}
	}
	
	.stats {
		display: flex;
		justify-content: space-between;
		padding-top: 30rpx;
		border-top: 1rpx solid rgba(255,255,255,0.2);
		
		.stat-item {
			text-align: center;
			
			.value {
				display: block;
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 8rpx;
				font-family: 'DIN Alternate', -apple-system, BlinkMacSystemFont, sans-serif;
				text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
			}
			
			.label {
				font-size: 24rpx;
				opacity: 0.9;
			}
		}
	}
}

.menu-grid {
	display: flex;
	flex-wrap: wrap;
	background-color: #fff;
	margin: 20rpx;
	padding: 20rpx;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	
	.menu-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 0;
		position: relative;
		
		&::after {
			content: '';
			position: absolute;
			bottom: 10rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 0;
			height: 3rpx;
			background: #4A90E2;
			transition: all 0.3s;
		}
		
		&:active::after {
			width: 40%;
		}
		
		.icon {
			width: 60rpx;
			height: 60rpx;
			margin-bottom: 10rpx;
			background: linear-gradient(135deg, #f0f5ff, #e6f7ff);
			padding: 15rpx;
			border-radius: 20rpx;
			transition: all 0.3s;
		}
		
		text {
			font-size: 26rpx;
			color: #666;
			transition: all 0.3s;
		}
		
		&:active {
			.icon {
				transform: scale(0.9);
			}
			text {
				color: #4A90E2;
			}
		}
		
		&::before {
			content: '';
			position: absolute;
			top: 10rpx;
			right: 30rpx;
			width: 16rpx;
			height: 16rpx;
			background-color: #ff4d4f;
			border-radius: 50%;
			display: none;
		}
		
		&.need-auth::before {
			display: block;
		}
	}
}

// 添加骨架屏样式
.skeleton {
	.skeleton-block {
		background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
		background-size: 400% 100%;
		animation: skeleton-loading 1.4s ease infinite;
		border-radius: 4rpx;
	}
	
	.skeleton-circle {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
		background-size: 400% 100%;
		animation: skeleton-loading 1.4s ease infinite;
	}
	
	&.user-card {
		.name {
			width: 200rpx;
			height: 40rpx;
			margin-bottom: 10rpx;
		}
		
		.number, .phone {
			width: 160rpx;
			height: 30rpx;
			margin-top: 6rpx;
		}
		
		.value {
			width: 100rpx;
			height: 36rpx;
			margin-bottom: 8rpx;
		}
		
		.label {
			width: 120rpx;
			height: 24rpx;
		}
	}
	
	&.menu-grid {
		.text {
			width: 80rpx;
			height: 26rpx;
			margin-top: 10rpx;
		}
	}
}

@keyframes skeleton-loading {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0 50%;
	}
}

// 优化状态样式
.status {
	padding: 4rpx 16rpx;
	border-radius: 20rpx;
	
	&.待还款 {
		color: #f5222d;
		background-color: rgba(245, 34, 45, 0.1);
	}
	
	&.已还款 {
		color: #52c41a;
		background-color: rgba(82, 196, 26, 0.1);
	}
	
	&.待审核 {
		color: #faad14;
		background-color: rgba(250, 173, 20, 0.1);
	}
}

// 添加点击反馈
.menu-item {
	transition: transform 0.2s;
	
	&:active {
		transform: scale(0.95);
	}
}

@keyframes gradientMove {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateX(-10rpx);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
</style> 